<template>
  <div class="page-card">
    <plate-card :icon="TitleIcon" title="气象信息">
      <div class="py-2">
        <el-row>
          <el-col v-for="(item, index) in dataList" :key="index" :span="6" class="flex flex-col items-center justify-center">
            <div class="value-wrapper">
              <span class="font-bold text-[14px]">{{ item.value }}</span>
              <span v-if="item.desc" class="desc font-normal text-[10px]">{{ item.desc }}</span>
              <!--              <img :src="item.image" alt="" class="w-full h-full" />-->
            </div>
            <div class="mt-2 text-[#00D9FF] text-[14px]">{{ item.title }}</div>
          </el-col>
        </el-row>
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import { ref } from 'vue'
  import TitleIcon from '@/assets/images/card-title/weather-info.png'
  import { getAssetsFile } from '@/utils'

  const dataList = ref([
    { value: '32.3', title: '温度(℃)', image: getAssetsFile('weather-info/1.png') },
    { value: '50', title: '湿度(%)', image: getAssetsFile('weather-info/2.png') },
    { value: '0.03', title: 'CO₂浓度', image: getAssetsFile('weather-info/3.png') },
    { value: '3级', title: '风力/风向', desc: '东南', image: getAssetsFile('weather-info/4.png') }
  ])

  // 天气相关
  const todayWeather = ref<any>({ weather: '', temperature: '' })
  const getWeather = () => {
    //加载天气查询插件
    AMap.plugin('AMap.Weather', function () {
      //创建天气查询实例
      const weather = new AMap.Weather()
      //执行实时天气信息查询
      weather.getLive('杭州市', function (err: any, data: any) {
        console.log(err, data, '天气信息')
        if (err) return
        todayWeather.value = data
        dataList.value[0].value = data.temperature
        dataList.value[1].value = data.humidity
        dataList.value[3].value = data.windPower + '级'
        dataList.value[3].desc = data.windDirection
      })
    })
  }
  getWeather()
</script>

<style lang="scss" scoped>
  .value-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 56px;
    height: 56px;
    font-weight: bold;
    background: url('@/assets/images/wrapper-bg/1.png') no-repeat top;
    background-size: 100% 100%;
    .desc {
      white-space: pre-wrap;
      //font-size: 10px;
      transform: scale(0.8);
    }
  }
</style>
